<template>
  <div class="complatefind">
    <van-nav-bar>
      <template #left>
        <div class="left-nav">
          <div class="logo">
            <img class="auto-img" src="../assets/imgs/home_active.png" alt="" />
          </div>
          <div class="logo-title">Luckin Coffee</div>
        </div>
      </template>

      <template #right>
        <div class="right-title" @click="toMenu">先逛一逛</div>
      </template>
    </van-nav-bar>

    <div class="login-box">
      <div class="login-info">
        <div>
          <div class="welcome">找回密码！</div>
          <div class="en-welcome">Find password</div>
        </div>

        <div class="login-form">
          <van-form >
            <van-field
              v-model="verification.phone"
              name="手机号"
              label="手机号"
              placeholder="手机号"
              autocomplete="off"
            />
            <van-field
              v-model="verification.password"
              :type="loginPasswordStatus ? 'password' : 'text'"
              name="新密码"
              label="新密码"
              placeholder="新密码必须为字母开头"
              autocomplete="off"
              :right-icon="loginPasswordStatus ? 'closed-eye' : 'eye-o'"
            />

            <div class="forgot">
              <div class="forgot-text" @click="toLogin">已有账号,立即登录</div>
            </div>

            <div class="login-btn">
              <!-- @click="changePassword() -->
              <van-button round block color="#0c34ba" native-type="submit"
              @click="changePassword"
                >提交</van-button
              >
            </div>

            <div class="login-btn">
              <van-button round block>返回</van-button>
            </div>
          </van-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ComplateFind",
  data() {
    return {
      verification: {
        phone: "",
        password: "",
        //是否显示登录密码
      loginPasswordStatus: true,
      },
    };
  },
  methods:{
      //逛一逛,跳转
    toMenu() {
      this.$router.push({ name: "Menu" });
    },
    //切换登录
    toLogin() {
      this.$router.push({ name: "Login" });
    },
    changePassword(){
         this.axios({
        method: "POST",
        url: "/retrievePassword",
        data:{
            phone:this.verification.phone,
        password:this.verification.password
        }
        
      })
        .then((res) => {
          
          // console.log("res==============>",res);
          this.$toast(res.data.msg);

          if (res.data.code === "L001") {
            //登录成功
            //将token保存在cookie
            sessionStorage.setItem('token',res.data.token)
            setTimeout(() => {
              this.$router.push({name: 'Login'});
            }, 2000)
          }
          
        })
        .catch((err) => {
            console.log(err);
        });
    }
  }
};
</script>

<style lang="less" scoped>
.complatefind {
  .reg-form {
    margin-top: 30px;
  }
  .register {
    padding: 15px 10px 10px;
  }

  .register-title {
    font-size: 18px;
  }

  .forgot {
    margin-top: 20px;
    display: flex;
  }

  .forgot-text {
    margin-left: auto;
    color: #666;
    font-size: 14px;
  }

  .login-btn {
    margin-top: 50px;
  }

  .login-form {
    margin-top: 50px;
  }

  .welcome {
    font-size: 24px;
    font-weight: bold;
  }

  .en-welcome {
    font-size: 18px;
    color: #999;
    margin-top: 20px;
  }

  .left-nav {
    display: flex;
    align-items: center;
  }

  .logo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
  }

  .logo-title {
    margin-left: 10px;
    font-size: 14px;
    font-weight: bold;
  }

  .right-title {
    font-size: 14px;
    color: #0c34ba;
    font-weight: bold;
  }

  .login-box {
    position: fixed;
    top: 46px;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
  }

  .login-info {
    padding: 100px 10px 10px;
  }
}
</style>